<template>
	<div class="allGameSelect">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" title="Trò xổ số" left-arrow @click-left="onClickLeft"></van-nav-bar>
		<div class="gameListBox content">
			<div class="panel">
				<div class="funcBox">
					<div class="name"><span>Miền Bắc</span><img src="../../assets/images/right-bar.png"></div>
				</div>
				<ul class="playsBox">
					<li v-for="(item,index) in playlist" :key="index" @click="goto(item.label)" :class="item.label == activeName?'active':''">
						<div class="playbox-item">
							<div class="label">{{item.label}}</div>
							<van-count-down :time="time" />
						</div>
					</li>
				</ul>
			</div>
			<div class="panel">
				<div class="funcBox">
					<div class="name"><span>Miền Nam</span><img src="../../assets/images/right-bar.png">
					</div>
					<div class="filter">
						<van-popover v-model="showPopover" trigger="click" :actions="actions" placement="bottom-end" @select="onSelect">
							<template #reference>
								<span>{{funSelectA}}</span><span class="iconfont icon-icon_drop_down_solid dropDownIcon"></span>
							</template>
						</van-popover>
					</div>
				</div>
				<ul class="playsBox">
					<li v-for="(item,index) in playlist2" :key="index" @click="goto(item.label)" :class="item.label == activeName?'active':''">
						<div class="playbox-item">
							<div class="label">{{item.label}}</div>
							<van-count-down :time="time" />
						</div>
					</li>
				</ul>
			</div>
			<div class="panel">
				<div class="funcBox">
					<div class="name"><span>Miền Trung</span><img
							src="../../assets/images/right-bar.png"></div>
					<div class="filter">
						<van-popover v-model="showPopoverB" trigger="click" :actions="actions" placement="bottom-end" @select="onSelectB">
							<template #reference>
								<span>{{funSelectB}}</span><span class="iconfont icon-icon_drop_down_solid dropDownIcon"></span>
							</template>
						</van-popover>
					</div>
				</div>
				<ul class="playsBox">
					<li v-for="(item,index) in playlist3" :key="index" @click="goto(item.label)" :class="item.label == activeName?'active':''">
						<div class="playbox-item">
							<div class="label">{{item.label}}</div>
							<van-count-down :time="time" />
						</div>
					</li>
				</ul>
			</div>
			<div class="panel">
				<div class="funcBox">
					<div class="name"><span>Xổ Số VIP</span><img
							src="../../assets/images/right-bar.png"></div>
				</div>
				<ul class="playsBox">
					<li v-for="(item,index) in playlist4" :key="index" @click="goto(item.label)" :class="item.label == activeName?'active':''">
						<div class="playbox-item">
							<div class="label">{{item.label}}</div>
							<van-count-down :time="time" />
						</div>
					</li>
				</ul>
			</div>
			<div class="panel">
				<div class="funcBox">
					<div class="name"><span>Mega 6/45</span><img
							src="../../assets/images/right-bar.png"></div>
				</div>
				<ul class="playsBox">
					<li v-for="(item,index) in playlist5" :key="index" @click="goto(item.label)" :class="item.label == activeName?'active':''">
						<div class="playbox-item">
							<div class="label">{{item.label}}</div>
							<van-count-down :time="time" />
						</div>
					</li>
				</ul>
			</div>
			<div class="panel">
				<div class="funcBox">
					<div class="name"><span>keno</span><img src="../../assets/images/right-bar.png">
					</div>
				</div>
				<ul class="playsBox">
					<li v-for="(item,index) in playlist6" :key="index">
						<div class="playbox-item">
							<div class="label">{{item.label}}</div>
							<van-count-down :time="time" />
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import { Popover } from 'vant';
	export default {
		components: {
		},
		data() {
			return {
				activeName:'',
				showPopover: false,
				showPopoverB: false,
				funSelectA:'Toàn bộ',
				funSelectB:'Toàn bộ',
				actions: [{
					text: 'Toàn bộ'
				}, {
					text: 'Chủ nhật'
				}, {
					text: 'Thứ 2'
				}, {
					text: 'Thứ 3'
				}, {
					text: 'Thứ 4'
				}, {
					text: 'Thứ 5'
				}, {
					text: 'Thứ 6'
				},{
					text: 'Thứ 7'
				},],
				time: 333000,
				playlist:[
					{
						label:'Miền Bắc'
					},
					{
						label:'Miền Bắc VIP 5 phút'
					},
					{
						label:'Miền Bắc VIP 3 phút'
					},
					{
						label:'Miền Bắc VIP 45 giây'
					},
					{
						label:'Miền Bắc VIP 75 giây'
					},
					{
						label:'Miền Bắc VIP 2 phút'
					},
				],playlist2:[
					{
						label:'Miền Nam VIP 5 phút'
					},
					{
						label:'Cần Thơ'
					},
					{
						label:'Vũng Tàu'
					},
					{
						label:'Đà Lạt Chủ nhật'
					},
				],playlist3:[
					{
						label:'Bình Định'
					},
					{
						label:'Bình Định'
					},
					{
						label:'Quảng Bình'
					},
				],playlist4:[
					{
						label:'Hồ Chí Minh VIP'
					},
					{
						label:'Hà Nội VIP'
					},
				],playlist5:[
					{
						label:'Mega 6/45 1 Phút'
					},
				],playlist6:[
					{
						label:'Keno VIP 20 giây'
					},
					{
						label:'Keno VIP 30 giây'
					},
					{
						label:'Keno VIP 40 giây'
					},
					{
						label:'Keno VIP 50 giây'
					},
				],
			}
		},
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
			onSelect(action) {
				console.log(action.text)
				this.funSelectA = action.text
			},
			onSelectB(action) {
				console.log(action.text)
				this.funSelectB = action.text
			},
			onClickLeft() {
				this.$router.go(-1)
			},
			goto(label) {
				this.activeName = label
				setTimeout(() => {
					this.$router.push({
						path: '/lotteryA'
					})
				}, 500);
			}
		}
	}
</script>
<style>
</style>
